

Getting Started

Setting up a Kotlin Multiplatform Project

First, you should set up a Kotlin multiplatform project. For more information, please visit Kotlin's official documentation.

Install View

See the installation page for more information.

Build your UI

You can build your UI using DSL or from a serialized format such as JSON.

Using DSL

// import views
import view.core.views.layouts.Layout
import view.core.views.layouts.LinearLayout
import view.core.views.display.TextView

// import DSL
import view.core.loaders.builders.dsl.layouts.linearLayout
import view.core.loaders.builders.dsl.layouts.linearLayout.children
import view.core.loaders.builders.dsl.textView
import view.core.loaders.builders.dsl.button


// display counter on screen

var counter = 0

fun buildUI(): Layout {
    val layout = linearLayout {
        direction = LinearLayout.Direction.HORIZONTAL
        children[
                textView {
                    id = "counter_display"
                    text = "Counter: $counter"
                },

                button {
                    id = "increment_button"
                    text = "Press to increment"
                }
        ]
    }

    layout.find("increment_button").onClickListener = {
        counter++
        val textView = layout.find("counter_display") as TextView
        textView.text = "Counter: $counter"
    }

    return layout
}

Using JSON

// import views
import view.core.views.layouts.Layout
import view.core.views.display.TextView

// import view loader
import view.core.loaders.viewTree.treeLoaders.JsonTreeLoader


// display counter on screen

var counter = 0

fun buildUI(): Layout {
    val jsonString = """
        {
            "type": "linear_layout",
            "direction": "horizontal",
            "children": [
                {
                    "type": "text_view",
                    "id" = "counter_display",
                    "text" = "Counter: 0"
                },

                {
                    "type": "button",
                    "id" = "increment_button",
                    "text" = "Press to increment"
                }
            ]
        }
    """.trimIndent()

    val loader = JsonTreeLoader(jsonString)
    val layout = loader.loadViewTree()

    layout.find("increment_button").onClickListener = {
        counter++
        val textView = layout.find("counter_display") as TextView
        textView.text = "Counter: $counter"
    }

    return layout
}

Render your views on specific platforms

This example will show how to use the MaterialDesignJsViewRenderer which renders views on the web.

Please refer to each renderer's documentation on how to render views.

// import the renderer
import view.core.renderers.MaterialDesignJsRenderer

// contains the renderer's dependency injection configuration
import view.di.Container

// contains the core library's DI configuration
import view.di.KodeinContainer


fun displayUI() {
    // add the renderer's DI config to the library's DI config
    // Note that this should be done before using the library
    KodeinContainer.addConfig(Container.kodein, allowOverrides = true)

    // render the layout
    val layout = buildUI()
    MaterialDesignJsRenderer.setRoot(layout)
}